<template>
    <view class="x-tabbar-placeholder pb-safe-area">
        <view class="x-tabbar pb-safe-area">
            <view class="x-tabbar-item" v-for="(item, index) in GLOBALSTATUS.tabbar" :key="index"
                :class="{ 'x-tabbar-item-active': page && item.url.includes(page) }" @tap="handleClick(item)">
                <image :src="page && item.url.includes(page) ? (item.image_2 || item.image) : item.image"
                    class="x-tabbar-item-icon" />
                <text class="x-tabbar-item-text">{{WebConfigStore.replaceIndustryPersonnelName(item.title)}}</text>
            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { $page, $func } from '@/utils';
import { useStatusStore,useWebConfigStore, useRefs } from "@/stores";
import { onBeforeMount, ref, defineProps } from "vue";
const props = withDefaults(defineProps<{
    page?: string,
}>(), {
});
const emit = defineEmits(['reload']);
const page = ref(props.page);
const statusStore = useStatusStore();
const { GLOBALSTATUS } = useRefs(statusStore);
const WebConfigStore=useWebConfigStore();
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1];
onBeforeMount(() => {
    if (props.page === void (0)) {
        page.value = currentPage.route;
        const find = GLOBALSTATUS.value.tabbar.find((item:any) => item.url.includes(page.value));
        if (find && find.page === 'SWITCH') {
            uni.hideTabBar();
        }
    }
})
const emitReloadThrottle = $func.throttle(() => {
    emit('reload');
}, 3000);
const handleClick = (item: any) => {
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1];
    if (item.url.includes(currentPage.route)) {
        uni.pageScrollTo({
            scrollTop: 0,
            duration: 300
        });
        emitReloadThrottle();
        return;
    }
    $page.ads(item);
}
</script>
<style lang="scss" scoped></style>